<template>
	<view>
		<view class="box">
			<view style="display: flex;padding: 10px;">
				<view style="font-size: 18px;font-weight: bold;">健康科普</view>
				<view style="margin-left: 15px;color: gray;margin-top: 4px;">启迪民智</view>
				<view style="margin-left: 10px;color: gray;margin-top: 4px;">智慧养生</view>
				<view style="font-weight: bold;margin-left: 60px;margin-top: 4px;" @click="dialogToggle('error')">查看更多 >
				</view>
			</view>
			<scroll-view scroll-x="true" show-scrollbar="false"
				style="white-space: nowrap; width: 100%;margin-top: 10px;">
				<view style="display: flex;gap: 10px;">
					<view v-for="(department, index) in departmentData" :key="index">
						<button type="default" style="font-size: 14px;" size="mini"
							@click="changeOffice(department, index)"
							:class="{ 'is-active': selectedButtonIndex === index }">
							{{department.departmentName}}科普
						</button>
					</view>
				</view>
			</scroll-view>
			<view v-for="(item, index) in postData" :key="item.id"
				style="width: 100%; padding: 0 10rpx; box-sizing: border-box;margin-top: 10px;">
				<view style="margin-bottom: 20rpx;">
					<view class="box" @click="goPostDetail(item.id,item.typeId)">
						<view style="display: flex;gap: 20px;">
							<view style="flex: 4;">
								<view style="font-size: 16px;font-weight: bold;">{{item.title}}
									<uni-tag text="内科" type="success" style="margin-left: 5px;"></uni-tag>
								</view>
								<view style="display: flex;margin-top: 10px;">
									<image src="../../static/icons/用户.png" style="width: 40rpx;" mode="widthFix">
									</image>
									<view style="margin-top: 5px;margin-right: 10px;">{{item.userName}}</view>
									<image src="../../static/icons/眼睛.png" style="width: 40rpx;margin-top: 3px;"
										mode="widthFix"></image>
									<view style="margin-top: 5px;margin-right: 10px;">{{item.lookNum}}</view>
									<image src="../../static/icons/点赞.png" style="width: 40rpx;margin-top: 3px;"
										mode="widthFix"></image>
									<view style="margin-top: 5px;margin-right: 10px;">{{item.clickNum}}</view>
									<image src="../../static/icons/收藏.png" style="width: 40rpx;margin-top: 3px;"
										mode="widthFix"></image>
									<view style="margin-top: 5px;margin-right: 10px;">{{item.collectNum}}</view>
								</view>
							</view>
							<image :src="item.img" style="width: 70px; height: 70px;">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="我知道了" title="通知" content="测试数据,暂无更多信息"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postData: {},
				departmentData: {},
				selectedButtonIndex: 0,
				typeId: 10
			}
		},
		onShow() {
			this.loadPost(this.typeId)
			this.loadDepartment()
		},
		methods: {
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			loadDepartment() {
				this.$request.get('/department/selectAll').then(res => {
					if (res.code === '200') {
						this.departmentData = res.data;
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			loadPost(typeId) {
				this.$request.get(`/post/selectPage/${typeId}`)
					.then(res => {
						if (res.code === '200') {
							this.postData = res.data
						} else {
							this.$message.error(res.msg)
						}
					})
					.catch(error => {
						this.$message.error('请求失败')
					})
			},
			changeOffice(department, index) {
				this.selectedButtonIndex = index
				this.loadPost(department.id)
			},
			goPostDetail(postId, typeId) {
				uni.navigateTo({
					url: `/pages/postDetail/postDetail?postId=${postId}&typeId=${typeId}`
				})
			},
		}
	}
</script>

<style>
	.is-active {
		background-color: #ffaa00;
		/* 选中状态的背景颜色示例 */
		color: #FFF7F3;
		/* 文本颜色 */
		border-color: #FF5000;
		/* 边框颜色 */
	}
</style>